<script setup lang="ts">

interface Menu {
  name: string,
  to: string
}

const menu:Menu[] = [
  { name: '破壳AI开放平台', to: 'https://perkai.pushplus.plus/' }
]

const method = ({ to }: Menu) => {
  switch (to) {
    case '':
      ElNotification({
        title: '暂未开放'
      })
      break
    default:
      window.open(to, '_blank')
      break
  }
}

const headerRef = ref()

const first = useFirst()

onMounted(() => {
  first.headerHeight = headerRef.value.offsetHeight
})

</script>
<template>
  <div ref="headerRef" class="w-full py-3 sticky top-0 left-0 header-bg bg-white/0 border-b z-10">
    <Space class="flex items-center justify-between px-8">
      <!-- 左 -->
      <div class="flex items-center cursor-pointer" @click="$router.push('/')">
        <img class="w-11" src="/icon.png">
        <span class="ml-2.5 text-3xl font-bold text-primary">破壳AI 应用集</span>
      </div>
      <!-- 右 -->
      <div>
        <span
          v-for="(item, index) in menu"
          :key="index"
          class="mr-3 px-4 py-1.5  rounded-md cursor-pointer select-none hover:bg-primary/5 hover:text-primary"
          @click="method(item)"
        >{{ item.name }}</span>
      </div>
    </Space>
  </div>
</template>
